<template>
  <div>
    <ECharts 
      ref="bar" 
      :option="options.option"
    ></ECharts>
  </div>
</template>

<script>
import echarts from 'echarts';
import { h, onMounted, reactive, ref } from 'vue';
import { createComponent } from 'echarts-for-vue';
export default {
  components: {
    ECharts: createComponent({ echarts, h })
  },

  setup() {
  const option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2015', '2016', '2017', '2018', '2019'],
                ['Matcha Latte', 43.3, 85.8, 93.7, 20, 10],
                ['Milk Tea', 83.1, 73.4, 55.1, 34.5, 16.7],
                ['Cheese Cocoa', 86.4, 65.2, 82.5, 56.7, 34.5],
                ['Walnut 2', 72.4, 53.9, 39.1, 100.1, 300.2],
                ['Walnut 3', 72.4, 53.9, 39.1, 100.1, 300.2],
                ['Walnut 4', 72.4, 53.9, 39.1, 100.1, 300.2],
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    }

    const bar = ref(null)
    
    const options = reactive({
      option
    })

    onMounted(() => {
      bar.value.inst.setOption(
        {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
      )
    })

    return {
      options,
      bar
    }
  }
}
</script>

<style scoped>
div {
  width: 1600px;
  height: 500px;
}
</style>